<div class="date">
  <label>样式：</label>
  <nz-select style="width: 100px;" [(ngModel)]="style">
    <nz-option *ngFor="let option of styles" [nzLabel]="option.label" [nzValue]="option.value">
    </nz-option>
  </nz-select>
  <button nz-button nzType="primary"  nzShape="round" (click)="saveImgLocal()"><i nz-icon type="download"></i>导出</button>
  (更新了版本，导出的图片部分样式丢死，不兼容svg，emmmm...以前好像没问题,再议，再议)
  <!-- <button nz-button nzType="primary" [nzSize]="size" nzShape="round" (click)="download()"><i nz-icon type="download"></i>导出</button> -->
</div>
<div id="wrap" [class]="style">
  <div class="logo">
    <a></a>
  </div>
  <div class="header">
    <div class="title">
      <a>作者</a>
      <a>(周榜)</a>
    </div>
  </div>
  <nz-table  #basicTable [nzData]="data" [nzShowPagination]="false">
    <thead nz-thead>
      <tr>
        <th nz-th>
          <span></span>
        </th>
        <th nz-th>
            <span>排名</span>
        </th>
        <th nz-th>
          <span>代表作品</span>
        </th>
        <th nz-th>
          <span>作者</span>
        </th>
        <th nz-th>
            <span>人气</span>
        </th>
      </tr>
    </thead>
    <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of basicTable.data;let i=index" [ngClass]="{'two': i%2 !== 0}">
       
        <td *ngIf="data.rank_change == 0" class="woks-no">--</td>
        <td *ngIf="data.rank_change == null" class="woks-new">NEW</td>
        <td *ngIf="data.rank_change > 0" class="woks-top">
          <i class="anticon anticon-arrow-up"></i>{{data.rank_change}}</td>
        <td *ngIf="data.rank_change < 0" class="woks-down">
          <i class="anticon anticon-arrow-down"></i>{{data.rank_change}}</td>
          <td nz-td>
              <i [ngClass]="{'td1':i===0,'td2':i===1,'td3':i===2}"></i>
              <i *ngIf="i>2" style="font-weight:bolder">{{i+1}}</i>
            </td>
        <td nz-td>{{data.writer_name}}</td>
        <td nz-td>{{data.opus }}</td>
        <td nz-td>
          <button class="bt" [ngClass]="{'btn1':i===0,'btn2':i===1,'btn3':i===2}">{{data.rank}}</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <div class="footer">
    <label>榜单说明：</label>
    <div class="main">
     
    </div>
  </div>
</div>
<img src="{{canvasImg}}" style="display: none"/>
